import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, BrowserRouter, Routes, Route, NavLink, Navigate,Link } from './react-router-dom';
import Home from './components/Home';
import User from './components/User';
import Profile from './components/Profile';
import Post from './components/Post';


import { createBrowserHistory,createHashHistory } from 'history' 
// console.log( createBrowserHistory())
// createBrowserHistory ===》window.history
// createHashHistory ===> window.hash

const activeStyle = { backgroundColor: 'red' };

ReactDOM.render(
  <BrowserRouter>
    <ul>
      <li>
        <NavLink 
              to='/' 
              style={({ isActive }) => isActive ? activeStyle : {}} 
              className={({ isActive }) => isActive ? 'active' : ''}
        >首页
        </NavLink>
      </li>
      <li><NavLink to='/user'  style={({ isActive }) => isActive ? activeStyle : {}} 
              className={({ isActive }) => isActive ? 'active' : ''}>用户管理</NavLink></li>
      <li><NavLink to='/profile'  style={({ isActive }) => isActive ? activeStyle : {}} 
              className={({ isActive }) => isActive ? 'active' : ''}>个人中心</NavLink></li>
    </ul>
    <Routes>
      <Route path='/' element={<Home name='Ikki'/>}></Route>
      <Route path='/user' element={<User />}></Route>
      <Route path='/profile' element={<Profile/>}></Route>
      <Route path='/post/:id' element={<Post/>}></Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);






